<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>竹里馆用户注册</title>
	    
	    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/index.css">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<style type="text/css">
	  .error{
	  	color:RED;
	  	font-size:12px;
	  }
	  .success{
	  	color:green;
	  	font-size:12px;
	  }
	  img{
		   width:100px; 
		   height:100px; 
		   border-radius:50px;
		   border: 1px solid #E0E0E0;
		   overflow: hidden; 
		}
	</style>
	<!-- ; background-attachment: fixed -->
	<!-- background-repeat:no-repeat; background-attachment:fixed; -->
	<body background="${pageContext.request.contextPath}/front/images/register_back.jpg" style="background-attachment:fixed;background-size:100%">
	<section id="content" >
		<div>
			<h4>用户注册</h4>
		</div>
	    <!--内容-->
	    <div class="container">
	    <div class="content-body">
	        <div class="dom" style="display: block;">
	        	<!-- 1 头像预览效果 -->
				<div class="userImage" style="text-align:center">
					<img src="#" id="img3" /> 
				</div>
	            <form action="${pageContext.request.contextPath}/RegisterAndLoginServlet" enctype="multipart/form-data" method="post">
	            	<!-- 隐藏域 -->
	            	<input type="hidden" name="op"  value="register">
	            	<div>
	            		<h4>上传头像</h4>
						<input type="file" id="file" class="filepath" name="userPicture" onchange="setImagePriview()" accept="image/jpg,image/jpeg,image/png"> 
					</div>
	               <!--  class="s1" -->
	                <div class="s1">
	                    <h4>用户名</h4>
	                    <input type="text" name="userName" id="userName" placeholder="输入用户名" required="required">
	                    <label id="userNameTip" style="padding-left:0px"></label>
	                </div>
	                <div class="s1">
	                    <h4>密码</h4>
	                    <input type="text" name="userPwd" id="userPwd" placeholder="输入密码" required="required">
	                    <label id="userPwdTip" style="padding-left:0px"></label>
	                </div>
	                
	                <div class="s1">
	                    <h4>手机号码</h4>
	                    <input type="text" name="userPhone" id="userPhone" placeholder="填写你的手机号码作为登录账户" required="required">
	                    <label id="userPhoneTip" style="padding-left:0px"></label>
	                </div>
	                <div class="s1 msg-code">
	                    <h4>短信验证码</h4>
	                    <!-- required="required" -->
	                    <input type="text" id="verifyCode" value="" placeholder="填写短信验证码" name="verifyCode" required="required">
	                    <input type="button" id="sendVerifyCode" value="免费获取验证码">
	                    <!-- <label id="verifyCodeTip" style="padding-left:0px"></label> -->
	                </div>
	                <label id="verifyCodeTip" style="padding-left:0px"></label>
	                <div>
	                	<h4>性别</h4>
	                	<input type="radio" name="userSex" value="男">男&nbsp;&nbsp;&nbsp;
						<input type="radio" name="userSex" value="女">女
	                </div>
	                <!-- <input type="submit" name="" value="注册" id="register"> -->
	                <input type="submit" class="btn" value="注&nbsp;册" id="register">
	            </form>
	        </div>
	    </div>
	    </div>
	</section> 
	</body>
	<!-- 以下是民宿代码 -->
	<%-- <script src="${pageContext.request.contextPath}/front/js/countdown.js"></script> --%>
	<script src="${pageContext.request.contextPath}/front/js/jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// 对用户名输入框绑定失去焦点事件
			$("#userName").blur(function(){
				// 获取输入的用户名
				var userName = $(this).val().trim();
				/* var p = /^[\u0391-\uFFE5]+$/; */
				var p = /^[a-zA-Z]+[a-zA-Z0-9]+$/;
				// 判断用户名是否符合条件
				if(p.test(userName) && (userName.length < 1) || (userName.length > 20)){
					$("#userNameTip").text("用户名由数字和字母组成以英文开头,不能为空或者大于20个字符");
					$("#userNameTip").addClass("error");
				} else if(!p.test(userName)){
					$("#userNameTip").text("用户名由数字和字母组成以英文开头且不能为中文,不能为一个字符");
					$("#userNameTip").addClass("error");
				} else {
					// 发送ajax
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/RegisterAndLoginServlet",
						type:"GET",
						data:{op:"existsOfuserName",userName:userName},
						dataType:"text",
						success:function(result,status,xhr){
							if(result=="true"){ // 用户名存在
								$("#userNameTip").text("账号已存在");
								$("#userNameTip").addClass("error");
								// 注册按钮设置不可用
								$("#register").prop("disabled",true);
							}else if(result=="false"){// 用户名不存在
								$("#userNameTip").text("账号可用");
								$("#userNameTip").addClass("success");
								// 注册按钮设置可用
								$("#register").prop("disabled",false);
							}
							
						},
						error:function(xhr,status,error){
							alert("ajax异步请求失败");
						}
					});
				}
			});
			
			// 对密码输入框绑定失去焦点事件
			$("#userPwd").blur(function(){
				// 获取输入的密码
				var userPwd = $(this).val().trim();
				// 判断密码是否符合条件
				if((userPwd.length < 6) || (userName.length > 30)){
					$("#userPwdTip").text("密码不能少于6个字符或者大于30个字符");
					$("#userPwdTip").addClass("error");
					// 注册按钮设置不可用
					$("#register").prop("disabled",true);
				} else {
					$("#userPwdTip").text("密码可用");
					$("#userPwdTip").addClass("success");
					// 注册按钮设置可用
					$("#register").prop("disabled",false);
				}
			});
			
			// 对手机号码输入框绑定失去焦点事件
			$("#userPhone").blur(function(){
				// 获取输入的手机号
				var userPhone = $(this).val().trim();
				// 判断手机号是否符合条件-正则表达式
				var pattern = /^1[3456789]\d{9}$/;
				// var pattern = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
				if(pattern.test(userPhone) == false){
					$("#userPhoneTip").text("手机号不正确");
					$("#userPhoneTip").addClass("error");
					// 发送验证码不可用
					$("#sendVerifyCode").prop("disabled", true);
					// 注册按钮设置不可用
					$("#register").prop("disabled",true);
				} else {
					$("#userPhoneTip").text("手机号正确");
					$("#userPhoneTip").addClass("success");
					// 发送验证码可用
					$("#sendVerifyCode").prop("disabled", false);
					// 注册按钮设置可用
					$("#register").prop("disabled",false);
				}
			});
			
			// 对输入的短信验证码框绑定失去焦点事件
			$("#verifyCode").blur(function(){
				// 获取输入的验证码
				var verifyCode = $("#verifyCode").val().trim();
				// 判断输入的验证码是否为空
				if(verifyCode.length == 0){
					$("#verifyCodeTip").text("验证码不能为空");
					$("#verifyCodeTip").addClass("error");
					// 注册按钮设置不可用
					$("#register").prop("disabled",true);
				} else {
					// 发送ajax
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/RegisterAndLoginServlet",
						type:"GET",
						data:{op:"verifyCode",verifyCode:verifyCode},
						dataType:"text",
						success:function(result,status,xhr){
							if(result=="true"){ // 验证码正确
								$("#verifyCodeTip").text("输入正确");
								$("#verifyCodeTip").addClass("success");
								// 登录按钮设置可用
								$("#register").prop("disabled",false);
							}else if(result=="false"){ // 验证码不正确
								$("#verifyCodeTip").text("输入错误,请重新输入!");
								$("#verifyCodeTip").addClass("error");
								// 登录按钮设置不可用
								$("#register").prop("disabled",true);
							}
							
						},
						error:function(xhr,status,error){
							alert("ajax异步请求失败");
						}
					});
				}
			});
			
			// 对短信验证码绑定点击事件
			// 定义一个flag,用于判断发送短信验证码的按钮是否被点击过--点击注册按钮时会用到
			var flag = false;
			$("#sendVerifyCode").on("click",function(){
				//flag = true;
				//settime(this);
				// 获取手机号
				var userPhone = $("#userPhone").val().trim();
				// 获取输入的验证码
				var verifyCode = $("#verifyCode").val().trim();
				// 判断手机号是否输入了
				if(userPhone.length == 0) {
					$("#userPhoneTip").text("您没有输入手机号,请您重新输入");
					$("#userPhoneTip").addClass("error");
					// 发送验证码不可用
					$(this).prop("disabled", true);
					// 注册按钮设置不可用
					$("#register").prop("disabled",true);
				} else {
					flag = true;
					settime(this);
					// 发送验证码可用
					$(this).prop("disabled", false);
					// 注册按钮设置可用
					$("#register").prop("disabled",false);
				
					// 发送ajax
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/RegisterAndLoginServlet",
						type:"POST",
						data:{op:"sendVerifyCode",userPhone:userPhone,verifyCode:verifyCode},
						dataType:"text",
						success:function(result,status,xhr){
							if(result=="false"){ // 验证码发送失败
								alert("手机验证码发送失败，检查手机号是否输入正确");
								// 注册按钮设置不可用
								$("#register").prop("disabled",true);
							}
						},
						error:function(xhr,status,error){
							alert("请求失败");
						}
					}); 
				}
			}); 
			
			// 对注册按钮做点击事件
			$("#register").on("click change",function(){
				// 判断性别是否选择
				var sex = $('input:radio[name="userSex"]:checked').val();
				// 判断验证码是否发送和性别是否选择
				if(flag == true && sex == null){
					alert("性别没有选择!");
			        // 设置当前按钮不可用
			        return false;
				} else if(flag == false && sex != null){
					alert("没有发送验证码(或者当前所填写的验证码框里的验证码是假的)");
		        	// 设置当前按钮不可用
		        	return false; //这里的return false才能使form不提交，维持在此页面
				} else if(flag == false && sex == null){
					alert("没有发送验证码且没有选择性别");
		        	// 设置当前按钮不可用
		        	return false;
				} else if(flag == true && sex != null){
					return true;
				}
				
			});
		})
		
		// 选择文件的改变事件,生成图片预览功能
		function setImagePriview() {
			// 得到文件列表数组,获取数组中的第一个文件
			var file = document.getElementById("file").files[0];
			// 没有选择文件
			if(file==null){
				document.getElementById("img3").src = "#";
			}else{
				// 构建一个文件渲染对象
				var reads = new FileReader();
				// FileReader.readAsDataURL 读取指定Blob或File的内容
				reads.readAsDataURL(file);
				// 获取文件数据
				reads.onload = function(){
					// 显示图片
					document.getElementById("img3").src = this.result;
				}
			}
			
		}
	
		// 提示文件上传不符合的操作
		var fileuploaderror = "${param.fileuploaderror}";
		if(fileuploaderror!=""){
			alert("图片文件只能是jpg/jpeg/png格式");
		}
		
		//倒计时
		var countdown = 60;
		function settime(obj) {
		    if (countdown == 0) {
		        obj.removeAttribute("disabled");
		        obj.value="免费获取验证码";
		        countdown = 60;
		        return;
		    } else {
		        obj.setAttribute("disabled", true);
		        obj.value="重新发送(" + countdown + ")";
		        countdown--;
		    }
		setTimeout(function() {
		    settime(obj) }
		    ,1000)
		}
		
	</script>
</html>